<template>
	<div class="content">
		<cl-crud @load="onLoad">
			<template #slot-btn>
				<el-button
					type="danger"
					size="mini"
					@click="batchFiled('pass')"
					:disabled="selectRow.length > 0 ? false : true"
					>批量通过</el-button
				>
				<el-button
					type="warning"
					size="mini"
					@click="batchFiled('reject')"
					:disabled="selectRow.length > 0 ? false : true"
					>批量驳回</el-button
				>
				<el-button
					type="success"
					size="mini"
					@click="batchFiled('pay')"
					:disabled="selectRow.length > 0 ? false : true"
					>设为打款成功</el-button
				>
				<el-button
					type="primary"
					size="mini"
					@click="batchFiled('unPay')"
					:disabled="selectRow.length > 0 ? false : true"
					>设为打款失败</el-button
				>
			</template>
			<template #table-column-status="{scope}">
				<div>
					<span v-if="scope.row.status == 0" style="color:#F34D4D">待审核</span>
					<span v-if="scope.row.status == 1" style="color:#22DE48">待打款</span>
					<span v-if="scope.row.status == 2" style="color:#F34D4D">审核失败</span>
					<span v-if="scope.row.status == 3" style="color:#22DE48">提现成功</span>
					<span v-if="scope.row.status == 4" style="color:#F34D4D">提现失败</span>
				</div>
			</template>
			<template #slot-operate="{scope}">
				<div v-if="scope.row.status === 0">
					<el-button type="text" size="small" @click="onPass(scope.row.id)"
						>通过</el-button
					>
					<el-button type="text" size="small" @click="onReject(scope.row.id)"
						>驳回</el-button
					>
				</div>
				<div v-else-if="scope.row.status === 1">
					<el-button type="text" size="small" @click="onPay(scope.row.id)"
						>打款成功</el-button
					>
					<el-button type="text" size="small" @click="onUnPay(scope.row.id)"
						>打款失败</el-button
					>
				</div>
				<div v-else-if="scope.row.status === 2 || scope.row.status === 4">
					<el-popover
						placement="top-start"
						title="失败原因"
						width="200"
						trigger="hover"
						:content="scope.row.reason"
					>
						<div slot="reference" style="cursor: pointer; color:#F34D4D">
							查看失败原因
						</div>
					</el-popover>
				</div>
				<el-button
					type="text"
					size="small"
					@click="onPay(scope.row.id)"
					v-if="scope.row.status === 4"
					>重新打款</el-button
				>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
export default {
	name: 'withdraw',
	data() {
		return {
			crud: null,
			selectRow: []
		};
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.promotion.withdraw)
				.set('search', {
					key: {
						placeholder: '请输入用户名'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'selection',
							label: '全选',
							align: 'center',
							width: '60px'
						},
						{
							label: '序号',
							type: 'index',
							align: 'center'
						},
						{
							label: '申请人',
							prop: 'name',
							align: 'center'
						},
						{
							label: '提现账号',
							prop: 'account',
							align: 'center'
						},
						{
							label: '提现金额',
							prop: 'amount',
							align: 'center'
						},
						{
							label: '申请时间',
							prop: 'createTime',
							align: 'center'
						},
						{
							label: '审核状态',
							prop: 'status',
							align: 'center'
						}
					],
					op: {
						layout: ['slot-operate']
					},
					props: {
						'default-sort': {
							prop: 'createTime',
							order: 'descending'
						}
					},
					on: {
						'selection-change': selection => {
							this.selectRow = selection;
						}
					}
				})
				.set('layout', [
					['slot-top'],
					['refresh-btn', 'slot-btn', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next, render }) => {
					const { list } = await next(params);
					// list.forEach(item => {
					// 	item.startTime = moment(parseInt(item.startTime)).format('YYYY-MM-DD HH:mm:ss');
					// 	item.endTime = moment(parseInt(item.endTime)).format('YYYY-MM-DD HH:mm:ss');
					// })
					render(list);
				})
				.done();
			app.refresh();
		},
		refresh(params) {
			this.crud.refresh(params);
		},
		onPass(ids) {
			this.$confirm('该操作会将会通过审核，是否确认？', '提示', {
				type: 'warning',
				confirmButtonText: '审核通过',
				cancelButtonText: '取消操作'
			})
				.then(() => {
					this.$service.promotion.withdraw
						.pass({
							ids
						})
						.then(() => {
							this.$message({
								type: 'success',
								message: '操作成功'
							});
							this.crud.refresh();
						})
						.catch(err => this.$message.error(err));
				})
				.catch(() => {});
		},
		onReject(ids) {
			this.$confirm('该操作会将会驳回审核，是否确认？', '提示', {
				type: 'warning',
				confirmButtonText: '确认驳回',
				cancelButtonText: '取消驳回'
			})
				.then(() => {
					this.$refs['cl-form'].open({
						props: {
							width: '500px',
							labelWidth: '100px',
							center: true,
							'custom-class': 'custom-class-dialog-mini'
						},
						items: [
							{
								prop: 'reason',
								label: '拒绝原因',
								component: {
									name: 'textarea-input',
									data() {
										return {
											textarea: ''
										};
									},
									methods: {
										Change(e) {
											console.log(e);
											this.$emit('input', e);
										}
									},
									// eslint-disable-next-line
										render(h) {
										return (
											<el-input
												type="textarea"
												onChange={this.Change}
												rows={6}
												placeholder="请输入内容"
												v-model={this.textarea}></el-input>
										);
									}
								}
							}
						],
						on: {
							submit: ({ data, close }) => {
								// 提交事件
								this.$service.promotion.withdraw
									.reject({
										ids,
										...data
									})
									.then(() => {
										this.$message({
											type: 'success',
											message: '操作成功'
										});
										this.crud.refresh();
										close();
									})
									.catch(err => this.$message.error(err));
							},

							close() {
								// 关闭事件
							}
						}
					});
				})
				.catch(() => {});
		},
		onPay(ids) {
			this.$confirm('该操作会将会设为打款成功，是否确认？', '提示', {
				type: 'warning',
				confirmButtonText: '确认成功',
				cancelButtonText: '取消打款'
			})
				.then(() => {
					this.$service.promotion.withdraw
						.batchOperate({
							ids,
							status: 3
						})
						.then(() => {
							this.$message({
								type: 'success',
								message: '操作成功,后台正在进行中，请稍后查看'
							});
							this.crud.refresh();
						})
						.catch(err => this.$message.error(err));
				})
				.catch(() => {});
		},
		onUnPay(ids) {
			this.$confirm('该操作会将会设为打款失败，是否确认？', '提示', {
				type: 'warning',
				confirmButtonText: '确认失败',
				cancelButtonText: '取消打款'
			})
				.then(() => {
					this.$refs['cl-form'].open({
						props: {
							width: '500px',
							labelWidth: '100px',
							center: true,
							'custom-class': 'custom-class-dialog-mini'
						},
						items: [
							{
								prop: 'reason',
								label: '失败原因',
								component: {
									name: 'textarea-input',
									data() {
										return {
											textarea: ''
										};
									},
									methods: {
										Change(e) {
											console.log(e);
											this.$emit('input', e);
										}
									},
									// eslint-disable-next-line
										render(h) {
										return (
											<el-input
												type="textarea"
												onChange={this.Change}
												rows={6}
												placeholder="请输入内容"
												v-model={this.textarea}></el-input>
										);
									}
								}
							}
						],
						on: {
							submit: ({ data, close }) => {
								// 提交事件
								this.$service.promotion.withdraw
									.batchOperate({
										ids,
										...data,
										status: 4
									})
									.then(() => {
										this.$message({
											type: 'success',
											message: '操作成功'
										});
										this.crud.refresh();
										close();
									})
									.catch(err => this.$message.error(err));
							},

							close() {
								// 关闭事件
							}
						}
					});
				})
				.catch(() => {});
		},
		// 批量操作
		batchFiled(type) {
			let ids = '';
			this.selectRow.forEach(item => {
				if (ids == '') {
					ids += item.id;
				} else {
					ids += ',' + item.id;
				}
			});
			if (type === 'pass') {
				this.onPass(ids);
			} else if (type === 'reject') {
				this.onReject(ids);
			} else if (type === 'pay') {
				this.onPay(ids);
			} else if (type === 'unPay') {
				this.onUnPay(ids);
			}
		}
	}
};
</script>

<style lang="stylus" scoped></style>
